<template>
  <div>
    <div
      style="
        width: 100%;
        height: 50px;
        border: 1px solid rgb(219, 218, 218);
        background-color: white;
        position: sticky;
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          width: 100px;
          height: 40px;
          justify-content: space-between;
          margin-left: 20px;
          font-weight: bold;
        "
      >
        <el-icon @click="back">
          <Back />
        </el-icon>
        <span>{{ rowId ? "编辑考勤组" : "新增考勤组" }}</span>
      </div>
      <div class="secondbox">
        <!-- 考勤组名称 -->
        <!-- form:{{ form }} rowId:{{ rowId }} -->
        <div>
          <p style="font-size: 14px">考勤组名称</p>
          <el-input
            v-model="form.name"
            style="width: 300px"
            placeholder="请输入考勤组名称"
          />
        </div>
        <!-- 考勤人员 -->
        <div style="width: 300px">
          <div style="display: flex">
            <p style="font-size: 14px">考勤人员</p>
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              text
              style="margin-top: 8px"
              @click="user = true"
            >
              {{ button.text }}
            </el-button>
          </div>
          <div
            style="
              font-size: 14px;
              color: rgb(131, 129, 129);
              margin-top: -20px;
            "
          >
            <p>
              参与考勤人员:
              <span v-if="departmentPersonnelGathering == 0">未设置</span>
              <span
                v-for="(item, index) in departmentPersonnelGathering"
                :key="item.id"
                >{{ item.name }}
                {{
                  departmentPersonnelGathering.length - index == 1 ? " " : "、"
                }}</span
              >
            </p>
          </div>
        </div>
        <!-- 考勤组负责人-->
        <div style="width: 300px">
          <div style="display: flex">
            <p style="font-size: 14px">考勤组负责人</p>
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              text
              style="margin-top: 8px"
              @click="person = true"
            >
              {{ button.text }}
            </el-button>
          </div>
          <div
            style="
              font-size: 14px;
              color: rgb(131, 129, 129);
              margin-top: -20px;
            "
          >
            <p>
              主负责人:
              <span v-if="principalIds.length == 0">未设置</span>
              <span
                >{{ principalIds.length != 0 ? principalIds[0].name : "" }}
              </span>
            </p>
          </div>
        </div>
        <!-- 考勤时间 -->
        <div style="width: 300px">
          <div style="display: flex">
            <p style="font-size: 14px">考勤时间</p>
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              text
              style="margin-top: 8px"
              @click="Time = true"
            >
              {{ button.text }}
            </el-button>
          </div>
          <div
            style="
              font-size: 14px;
              color: rgb(131, 129, 129);
              margin-top: -20px;
            "
          >
            <p>
              考勤类型:
              <span v-if="form.groupType == 1">固定班制 (固定时间上下班)</span>
              <span v-if="form.groupType == 2"
                >自由工时（不固定时间上下班）</span
              >
            </p>
            <p style="margin-top: -10px">
              工作日设置：
              <template v-if="form.groupType == 1">
                <span v-for="item in multipleSelection" :key="item.workdayId">{{
                  item.workday + " "
                }}</span>
              </template>

              <template v-else>
                <span v-for="item in form.freedomWorkday" :key="item">{{
                  tableData3.filter((v) => item == v.workdayId)[0].workday + " "
                }}</span>
              </template>

              <!-- <span
                v-if="
                  multipleSelection.length == 0 &&
                  form.freedomWorkday.length == 0
                "
                >周一 周二 周三 周四 周五</span
              > -->
            </p>
          </div>
        </div>
        <!-- 打卡方式-->
        <div style="width: 320px">
          <div style="display: flex">
            <p style="font-size: 14px">打卡方式</p>
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              text
              style="margin-top: 8px"
              @click="method = true"
            >
              {{ button.text }}
            </el-button>
          </div>
          <div
            style="
              font-size: 14px;
              color: rgb(131, 129, 129);
              margin-top: -20px;
            "
          >
            <p>
              考勤方式：
              <template v-if="form.clockInType.length != 0">
                <span v-for="item in form.clockInType" :key="item">{{
                  checkMethodList.filter((v) => v.id == item)[0].label + " "
                }}</span>
              </template>
            </p>
          </div>
        </div>
        <!-- 加班规则-->
        <div style="width: 400px">
          <div style="display: flex">
            <p style="font-size: 14px">加班规则</p>
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              text
              style="margin-top: 8px"
              @click="overtime = true"
            >
              {{ button.text }}
            </el-button>
          </div>
          <div
            style="
              font-size: 14px;
              color: rgb(131, 129, 129);
              margin-top: -20px;
            "
          >
            <p>规则名称：{{ overtimeRuleRow.name }}</p>
            <div v-for="item in overtimeRuleRow.ruleInfo" :key="item.id">
              <span v-if="item.dayType == 1">工作日：</span>
              <span v-if="item.dayType == 2">休息日：</span>
              <span v-if="item.dayType == 3">节假日：</span>
              <span v-if="item.isOvertime == 0">不允许加班</span>
              <span v-if="item.isOvertime != 0">加班必须审批，</span>
              <span v-if="item.calculateWay == 2 && item.isOvertime != 0"
                >{{ item.calculateWay }}以打卡为准，但不能超过审批单时长</span
              >
              <span v-if="item.calculateWay != 2 && item.isOvertime != 0"
                >{{ item.calculateWay }}加班时长以审批单为准</span
              >
            </div>
          </div>
        </div>
        <!-- 外勤规则-->
        <div style="width: 300px">
          <div style="display: flex">
            <p style="font-size: 14px">外勤规则</p>
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              text
              style="margin-top: 8px"
              @click="beside = true"
            >
              {{ button.text }}
            </el-button>
          </div>
          <div
            style="
              font-size: 14px;
              color: rgb(131, 129, 129);
              margin-top: -20px;
            "
          >
            <p>
              {{
                legworkConfigObj.isAllow == true
                  ? "允许外勤打卡"
                  : "不允许外勤打卡"
              }}
            </p>
            <div v-if="legworkConfigObj.isAllow == true">
              <p style="margin-top: -10px">
                {{
                  legworkConfigObj.isApproval == true
                    ? "外勤打卡需审批"
                    : "外勤打卡不需审批"
                }}
              </p>
              <p style="margin-top: -10px">
                {{
                  legworkConfigObj.isRemark == true
                    ? "外勤打卡需填写备注"
                    : "外勤打卡不需填写备注"
                }}
              </p>
              <p style="margin-top: -10px">
                {{
                  legworkConfigObj.isPhoto == true
                    ? "外勤打卡需拍照"
                    : "外勤打卡不需拍照"
                }}
              </p>
              <p style="margin-top: -10px">
                {{
                  legworkConfigObj.isHideAddress == true
                    ? "允许员工隐藏详细地址"
                    : "不允许员工隐藏详细地址"
                }}
              </p>
              <p style="margin-top: -10px">
                {{
                  legworkConfigObj.isFineTuning == true
                    ? "允许地点微调"
                    : "不允许地点微调"
                }}
              </p>
            </div>
          </div>
        </div>
        <!-- 休息日打卡规则-->
        <div style="width: 300px">
          <div style="display: flex">
            <p style="font-size: 14px">休息日打卡规则</p>
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              text
              style="margin-top: 8px"
              @click="rest = true"
            >
              {{ button.text }}
            </el-button>
          </div>
          <div
            style="
              font-size: 14px;
              color: rgb(131, 129, 129);
              margin-top: -20px;
            "
          >
            <p>
              {{
                form.dayOffRule.isApprove == true
                  ? "休息日打卡需审批"
                  : "休息日打卡无需审批"
              }}
            </p>
            <p style="margin-top: -10px">
              {{ form.dayOffRule.resetTime }}之后记为当天考勤
            </p>
            <p style="margin-top: -10px">
              {{ form.dayOffRule.type == 1 ? "标准打卡模式" : "严格打卡模式" }}
            </p>
          </div>
        </div>
        <!-- 补卡规则-->
        <div style="width: 300px">
          <div style="display: flex">
            <p style="font-size: 14px">补卡规则</p>
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              text
              style="margin-top: 8px"
              @click="replace = true"
            >
              {{ button.text }}
            </el-button>
          </div>
          <div
            style="
              font-size: 14px;
              color: rgb(131, 129, 129);
              margin-top: -20px;
            "
            v-if="cardRuleRow"
          >
            <p>规则名称：{{ cardRuleRow.name }}</p>
            <div>
              {{ cardRuleRow.isRemedy == 0 ? "不允许补卡" : "" }}
            </div>
            <div v-if="cardRuleRow.isRemedy != 0">
              补卡次数：每个月可提交{{ cardRuleRow.allowNum }}次；每月的{{
                cardRuleRow.countDayNum
              }}日起算
            </div>
            <div v-if="cardRuleRow.isRemedy != 0">
              补卡时限：可申请最近{{ cardRuleRow.dayLimit }}个{{
                handleDayType(cardRuleRow.dayType)
              }}内的补卡
            </div>
            <div v-if="cardRuleRow.isRemedy != 0">
              $补卡类型：<span v-for="item in cardRuleRow.type" :key="item">{{
                handleType(item) + "  "
              }}</span>
            </div>
          </div>
        </div>
        <!-- 拍照验证规则-->
        <div style="width: 300px; margin-bottom: 50px">
          <div style="display: flex">
            <p style="font-size: 14px">拍照验证规则</p>
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              text
              style="margin-top: 8px"
              @click="photo = true"
            >
              {{ button.text }}
            </el-button>
          </div>
          <div
            style="
              font-size: 14px;
              color: rgb(131, 129, 129);
              margin-top: -20px;
            "
          >
            <p>{{ form.isPhotoClockIn == true ? "已" : "未" }}开启拍照打卡</p>
          </div>
        </div>
      </div>
      <div
        style="width: 100%; height: 200px; background: white; margin-left: 20px"
      >
        <el-button
          type="primary"
          @click="handSaveSettings"
          style="margin-top: -50px"
          >保存设置</el-button
        >
        <!-- 保存设置弹框 -->

        <el-dialog
          title=""
          v-model="centerDialogVisible"
          :show-close="false"
          :width="400"
        >
          <div style="display: flex; align-items: center">
            <CircleCloseFilled
              style="
                width: 40px;
                height: 40px;
                background-color: '#EB5D48';
                margin-right: 15px;
              "
            />
            <span
              v-if="form.name == ''"
              style="font-size: 18px; color: '#171a1d'"
              >考勤组名称不能为空</span
            >
            <span
              v-if="form.userIds.length == 0 && form.deptIds.length == 0"
              style="font-size: 18px; color: '#171a1d'"
              >请选择考勤部门人员</span
            >
            <span
              v-if="principalIds.length == 0"
              style="font-size: 18px; color: '#171a1d'"
              >请选择考勤组负责人</span
            >
            <span
              v-if="form.wifiList.length == 0 && form.addressList.length == 0"
              style="font-size: 18px; color: '#171a1d'"
              >打卡方式：根据地点打卡、根据WiFi打卡必须设置一项</span
            >
          </div>

          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="centerDialogVisible = false"
                >我知道了</el-button
              >
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
    <!-- 新增考勤人员弹框 -->
    <el-drawer v-model="user" direction="rtl">
      <template #header>
        <h4 style="color: black">考勤人员</h4>
      </template>
      <template #default>
        <div>
          <div>
            <p>参与考勤人员（0）</p>
            <el-form>
              <el-form-item>
                <select-show
                  v-model:orgList="departmentPersonnelGathering"
                  type="org"
                  :disable-select-children-dept="false"
                  :multiple="true"
                  :showStyle="3"
                ></select-show>
              </el-form-item>
            </el-form>
            <div
              class="attendance-table"
              v-if="attendanceTableList.length != 0"
            >
              <p>部门({{ dtoList.length }})</p>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: left;
                "
              >
                <el-checkbox
                  v-model="form.isAuto"
                  size="large"
                  style="margin-right: 10px"
                />
                <span style="font-size: 14px">新成员是否自动加入</span>
              </div>
              <div class="attendance-table-header">
                <div>部门名称</div>
                <div>在此考勤组人数</div>
                <div>未在此考勤组人数</div>
              </div>
              <div class="attendance-table-list">
                <div
                  class="attendance-table-list-row"
                  v-for="item in attendanceTableList"
                  :key="item.deptId"
                >
                  <div>{{ item.deptName }}</div>
                  <div>{{ item.peopleCount }}</div>
                  <div>{{ item.outRangeCount }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="user = false">取消</el-button>
          <el-button type="primary" @click="user = false">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增考勤组负责人弹框 -->
    <el-drawer v-model="person" direction="rtl">
      <template #header>
        <div>
          <h4 style="color: black; width: 100%">考勤组负责人</h4>
        </div>
      </template>
      <template #default>
        <div>
          <div>
            <p>考勤组主负责人</p>
            <el-form>
              <el-form-item>
                <select-show
                  v-model:orgList="principalIds"
                  type="user"
                  :disable-select-children-dept="false"
                  :multiple="false"
                  :showStyle="3"
                ></select-show>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="person = false">取消</el-button>
          <el-button type="primary" @click="person = false">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增考勤时间弹框 -->
    <el-drawer v-model="Time" direction="rtl" @open="handleOpenTime">
      <template #header>
        <h4 style="color: black">考勤时间</h4>
      </template>
      <template #default>
        <div style="width: 100%; height: 300px">
          <p style="font-size: 14px">考勤类型</p>
          <div>
            <el-radio-group
              v-model="form.groupType"
              @change="switchAttendanceType"
            >
              <div style="display: flex; flex-direction: column">
                <el-radio @change="PB" :value="1" style="color: black"
                  >固定班制 (固定时间上下班)</el-radio
                >
                <span style="font-size: 12px; color: #747677"
                  >考勤组中所有人按照相同的时间打卡，适用于办公室坐班，例如朝九晚五</span
                >
              </div>

              <div
                style="display: flex; flex-direction: column; margin-top: 10px"
              >
                <el-radio @change="PB" :value="2" style="color: black"
                  >自由工时（不固定时间上下班）</el-radio
                >
                <span style="font-size: 12px; color: #747677">
                  上下班时间不固定，可随时打卡，适用于销售以及装修、家政等计时工
                </span>
              </div>
            </el-radio-group>

            <!-- 固定班制选项的显示隐藏页面 -->
            <div v-if="form.groupType == 1" style="margin-top: 20px">
              <p>工作日设置</p>
              <div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    margin-top: -20px;
                  "
                >
                  <p style="font-size: 14px">
                    快捷设置班次：{{ defaultShiftText }}
                  </p>
                  <el-button
                    type="primary"
                    link
                    @click="(currentRow = null), (handleClick1 = true)"
                    >更改班次</el-button
                  >
                  <!-- 更改班次弹框点击事件 -->
                </div>
                <!-- 固定班制表格 -->
                <el-table
                  ref="multipleTable"
                  :data="tableData3"
                  style="width: 100%"
                  highlight-current-row
                  @selection-change="handleSelectionChange"
                  border
                >
                  <el-table-column type="selection" />
                  <el-table-column label="工作日" prop="workday">
                  </el-table-column>
                  <el-table-column label="班次时间段" prop="defaultShiftText">
                  </el-table-column>

                  <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        size="small"
                        @click="handleCurrentRow(scope.row)"
                      >
                        <!-- 更改表格班次弹框点击事件 -->
                        更改班次
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <!-- 更改编辑班次文字按钮弹框 -->
            <el-dialog
              v-model="handleClick1"
              style="border-radius: 10px; width: 600px"
              align-center
            >
              <template #header>
                <div style="font-size: 16px">选择班次</div>
              </template>
              <template #default>
                <div>
                  <div>
                    <el-input
                      v-model="shiftName"
                      style="max-width: 200px; left: 350px; margin-top: 10px"
                      placeholder="请输入班次名称"
                      clearable
                      @change="getShiftList"
                    >
                      <template #append>
                        <el-button :icon="Search" />
                      </template>
                    </el-input>
                  </div>
                  <div class="shift">
                    <el-table
                      ref="radioTable"
                      :data="shiftList"
                      :header-cell-style="{
                        background: '#eef1f6',
                        color: '#909399',
                      }"
                      border
                      style="width: 100%; margin-top: 10px"
                      fixed
                      @row-click="rowClick"
                      @selection-change="selectionChange"
                      stripe
                    >
                      <el-table-column type="selection"> </el-table-column>
                      <el-table-column prop="name" label="班次名称">
                      </el-table-column>
                      <el-table-column prop="value" label="考勤时间">
                        <template #default="scope">
                          <span
                            >{{ scope.row.officeTime }}-{{
                              scope.row.closingTime
                            }}</span
                          >
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </template>
              <template #footer>
                <div style="margin-top: 10px">
                  <el-button @click="handleClick1 = false">取消</el-button>
                  <el-button
                    type="primary"
                    @click="(handleClick1 = false), radioTable.clearSelection()"
                  >
                    确定
                  </el-button>
                </div>
              </template>
            </el-dialog>

            <!-- 自由工时选项的显示隐藏页面 -->
            <div class="zy" v-if="form.groupType == 2">
              <span style="margin-top: 20px; font-size: 14px"> 工作日 </span>
              <el-checkbox-group
                v-model="form.freedomWorkday"
                style="font-size: 14px"
              >
                <el-checkbox
                  :label="item.workday"
                  :value="item.workdayId"
                  v-for="item in tableData3"
                  :key="item.workdayId"
                />
              </el-checkbox-group>

              <div
                style="font-size: 14px; margin-top: 20px; margin-bottom: 10px"
              >
                工作时长
              </div>
              <div>
                <cascader-timeSe
                  :endHour="24"
                  :endMinute="59"
                  :defaultSelectedTime="defaultWorkHours"
                  @timeChange="handleWorkHours"
                />
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="Time = false">取消</el-button>
          <el-button type="primary" @click="Time = false">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增打卡方式弹框 -->
    <el-drawer v-model="method" direction="rtl">
      <template #header>
        <h4 style="color: black">打卡方式</h4>
      </template>
      <template #default>
        <div>
          <p>考勤方式</p>
          <el-checkbox-group
            v-model="form.clockInType"
            @change="XZ"
            style="display: flex; flex-direction: column"
          >
            <el-checkbox
              :label="item.label"
              :value="item.id"
              v-for="item in checkMethodList"
              :key="item.id"
            />
          </el-checkbox-group>
          <p>以上方式满足一项，考勤组成员即可完成考勤</p>
        </div>
        <!-- 判断地点打卡显示隐藏 -->
        <el-button plain @click="handleOpenGD">添加(测试误点)</el-button>
        <div v-if="form.clockInType.find((num) => num == 1)">
          <div>
            <p>地点</p>
            <div style="display: flex; align-items: center">
              <el-button plain @click="handleOpenGD">添加</el-button>
              <p style="font-size: 14px; margin-left: 10px">
                可添加多个办公地点
              </p>
              <!-- <el-button type="text" style="margin-left: 10px" link
                >查看经纬度</el-button
              > -->
              <a href="https://lbs.amap.com/tools/picker">查看经纬度</a>
            </div>
          </div>
          <div class="wiFi-clock-table" v-if="form.addressList.length != 0">
            <div class="wiFi-clock-table_header">
              <div style="width: 50%">名称</div>
              <div style="width: 30%">有效范围</div>
              <div style="width: 20%">操作</div>
            </div>
            <div class="wiFi-clock-table_list">
              <div v-for="item in form.addressList" :key="item.name">
                <div style="width: 50%">
                  <div>{{ item.name }}</div>
                  <div style="font-size: 12px">{{ item.nameDetail }}</div>
                </div>
                <div style="width: 30%">{{ item.coverage }}</div>
                <div style="width: 20%">
                  <el-button type="text" @click="handleDeletePlace(item)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 判断wifi打卡显示隐藏 -->
        <div v-if="form.clockInType.find((num) => num == 2)">
          <div>
            <p>Wi-Fi</p>
            <div style="display: flex; align-items: center">
              <el-button plain @click="wifiDialog = true">添加</el-button>
              <p style="font-size: 14px; margin-left: 10px">可添加多个Wi-Fi</p>
            </div>
          </div>
          <div class="wiFi-clock-table" v-if="form.wifiList.length != 0">
            <div class="wiFi-clock-table_header">
              <div style="width: 20%">名称</div>
              <div style="width: 60%">MAC地址</div>
              <div style="width: 20%">操作</div>
            </div>
            <div class="wiFi-clock-table_list">
              <div v-for="item in form.wifiList" :key="item.name">
                <div style="width: 20%">{{ item.name }}</div>
                <div style="width: 60%">{{ item.macAddress }}</div>
                <div style="width: 20%">
                  <el-button type="text" @click="handleDeleteWIFI(item)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="method = false">取消</el-button>
          <el-button type="primary" @click="method = false">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增加班规则弹框 -->
    <el-drawer
      v-model="overtime"
      width="300"
      direction="rtl"
      @open="handleOpenOverTime"
    >
      <template #header>
        <div style="color: black; line-height: center">
          <span @click="goBackByIcon()" v-if="!checkRules">
            <el-icon><Back /></el-icon>
          </span>
          {{ titleByRules }}
        </div>
      </template>
      <template #default>
        <div v-if="checkRules" style="margin-top: 5px">
          <div style="display: flex; justify-content: space-between">
            <div>
              <!-- <el-button
                type="primary"
                plain
                :icon="Plus"
                @click="addRulesClick"
                >新增加班规则</el-button
              > -->
            </div>
            <div>
              <el-input
                v-model="queryParams.name"
                style="max-width: 200px; margin-left: 10px"
                placeholder="请输入规则名称"
                @change="getOvertimeList"
              >
                <template #append>
                  <el-button :icon="Search" link />
                </template>
              </el-input>
            </div>
          </div>
          <!-- 加班规则表格 -->
          <div style="margin-top: 20px" class="overtime-table">
            <!-- <el-table :data="tableData1" style="width: 100%">
              <el-table-column label="规则名称" width="180">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-icon><timer /></el-icon>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="规则内容" width="180">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-icon><timer /></el-icon>
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    size="small"
                    @click="handleClickFix(scope.$index, scope.row)"
                  >
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table> -->
            <el-table
              ref="radioTableOvertime"
              :data="overtimeList"
              :header-cell-style="{
                background: '#eef1f6',
                color: '#909399',
              }"
              border
              style="width: 100%; margin-top: 10px"
              fixed
              @row-click="rowClickOvertime"
              @selection-change="selectionChangeOvertime"
              stripe
            >
              <el-table-column type="selection"> </el-table-column>
              <el-table-column
                label="规则名称"
                align="center"
                prop="name"
                width="100"
              />
              <el-table-column
                label="规则内容"
                align="center"
                prop="createTime"
              >
                <template #default="scope">
                  <div v-for="item in scope.row.ruleInfo" :key="item.id">
                    <span v-if="item.dayType == 1">工作日：</span>
                    <span v-if="item.dayType == 2">休息日：</span>
                    <span v-if="item.dayType == 3">节假日：</span>
                    <span v-if="item.isOvertime == 0">不允许加班</span>
                    <span v-if="item.isOvertime != 0">加班必须审批，</span>
                    <span v-if="item.calculateWay == 2 && item.isOvertime != 0"
                      >{{
                        item.calculateWay
                      }}以打卡为准，但不能超过审批单时长</span
                    >
                    <span v-if="item.calculateWay != 2 && item.isOvertime != 0"
                      >{{ item.calculateWay }}加班时长以审批单为准</span
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="totalOvertime > 0"
              :total="totalOvertime"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getOvertimeList"
            />
          </div>
        </div>
        <div v-else>
          <div>
            <el-form
              :model="form2"
              label-position="top"
              label-width="auto"
              :rules="rules"
            >
              <el-form-item label="规则名称" prop="postName1">
                <el-input
                  v-model="form2.postName"
                  placeholder="请输入"
                  maxlength="30"
                  show-word-limit
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item label="应用范围" prop="postName1">
                <el-select
                  v-model="fwvalue"
                  placeholder="未设置"
                  @click="yysvalue1 = true"
                >
                </el-select>
              </el-form-item>
              <el-form-item label="负责人" prop="postName1">
                <el-select
                  v-model="fzsele"
                  placeholder="未设置"
                  @click="handleOpenByDropdown"
                >
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-tabs
                  v-model="activeName"
                  class="demo-tabs"
                  @tab-click="handleClickByWorkTabs"
                >
                  <el-tab-pane label="工作日" name="first">
                    <div>允许加班 <el-switch v-model="valueJb" /></div>
                    <div v-if="valueJb">
                      <div class="jb">
                        <el-radio-group v-model="radioJb1" class="ml-4">
                          <el-radio :value="1" size="large"
                            >允许班前和班后加班</el-radio
                          >
                          <el-radio :value="2" size="large"
                            >仅允许班前加班</el-radio
                          >
                          <el-radio :value="3" size="large"
                            >仅允许班后加班</el-radio
                          >
                        </el-radio-group>
                      </div>
                      <div class="xztj">
                        <p>计算方式</p>
                        <el-radio-group v-model="radioJs" class="ml-4">
                          <el-radio :value="1" size="large"
                            >按审批时长计算</el-radio
                          >
                          <el-radio :value="2" size="large"
                            >在审批的时段内，按打卡时长计算</el-radio
                          >
                          <el-radio :value="3" size="large"
                            >无需审批，按打卡时长计算</el-radio
                          >
                        </el-radio-group>
                      </div>
                      <div>
                        <p>加班起算时间</p>
                        <div style="margin-top: 20px">
                          下班<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟后开始算加班
                        </div>
                      </div>
                      <div>
                        <p>最小加班时间</p>
                        <div style="margin-top: 20px">
                          班前加班少于<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟，不计入加班
                        </div>
                        <div style="margin-top: 20px">
                          班后加班少于<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟，不计入加班
                        </div>
                        <div style="margin-top: 20px">
                          累计加班少于<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟，不计入加班
                        </div>
                        <div>扣除休息时间 <el-switch v-model="valueKc" /></div>
                        <div v-if="valueKc === true" class="xztj">
                          <el-radio-group v-model="xxradio" class="ml-4">
                            <el-radio :value="1" size="large"
                              >按审批时长计算</el-radio
                            >
                            <el-radio
                              :style="xxradio === 1 ? 'margin-top: 50px' : ''"
                              :value="2"
                              size="large"
                              >在审批的时段内，按打卡时长计算</el-radio
                            >
                          </el-radio-group>
                          <div v-if="xxradio === 1" class="xx">
                            休息开始：<el-time-picker
                              style="width: 70px"
                              v-model="startvalue"
                              placeholder="Arbitrary time"
                            />休息结束：<el-time-picker
                              style="width: 70px"
                              v-model="endvalue"
                              placeholder="Arbitrary time"
                            />
                          </div>
                          <div
                            v-if="xxradio === 2"
                            style="bottom: 0; position: relative"
                          >
                            每天加班满<el-input
                              style="width: 50px"
                              v-model="jbvalue"
                              placeholder="Arbitrary time"
                            />小时，扣除<el-input
                              style="width: 50px"
                              v-model="kcvalue"
                              placeholder="Arbitrary time"
                            />小时
                          </div>
                        </div>
                      </div>
                      <div style="margin-top: 20px">
                        <div>
                          加班时长计为调休或加班费
                          <el-switch v-model="scfvalue" />
                        </div>
                        <div v-if="scfvalue" class="xztj">
                          <el-radio-group v-model="scfradio" class="ml-4">
                            <el-radio :value="1" size="large"
                              >计为调休</el-radio
                            >
                            <el-radio
                              :style="scfradio === 1 ? 'margin-top: 50px' : ''"
                              :value="2"
                              size="large"
                              >计为加班费</el-radio
                            >
                            <el-radio
                              v-if="radioJs !== 3"
                              :value="3"
                              size="large"
                              >员工自主选择</el-radio
                            >
                          </el-radio-group>
                          <div
                            v-if="scfradio === 1"
                            style="top: -123px; position: relative"
                          >
                            按照1：<el-input
                              style="width: 50px"
                              v-model="jbvalue"
                              placeholder="Arbitrary time"
                            />计为调休时长，并关联假期项：调休
                          </div>
                          <div
                            v-if="scfradio === 3"
                            style="bottom: 0; position: relative"
                          >
                            按照1：<el-input
                              style="width: 50px"
                              v-model="jbvalue"
                              placeholder="Arbitrary time"
                            />计为调休时长，并关联假期项：调休
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="休息日" name="second">
                    <div>允许加班 <el-switch v-model="valueJb1" /></div>
                    <div v-if="valueJb1">
                      <!-- <div class="jb">
                        <el-radio-group v-model="radioJb1" class="ml-4">
                          <el-radio :value="1" size="large">允许班前和班后加班</el-radio>
                          <el-radio :value="2" size="large">仅允许班前加班</el-radio>
                          <el-radio :value="3" size="large">仅允许班后加班</el-radio>
                        </el-radio-group>
                      </div> -->
                      <div class="xztj">
                        <p>计算方式</p>
                        <el-radio-group v-model="radioJs1" class="ml-4">
                          <el-radio :value="1" size="large"
                            >按审批时长计算</el-radio
                          >
                          <el-radio :value="2" size="large"
                            >在审批的时段内，按打卡时长计算</el-radio
                          >
                          <el-radio :value="3" size="large"
                            >无需审批，按打卡时长计算</el-radio
                          >
                        </el-radio-group>
                      </div>
                      <div>
                        <p>加班起算时间</p>
                        <div style="margin-top: 20px">
                          下班<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟后开始算加班
                        </div>
                      </div>
                      <div>
                        <p>最小加班时间</p>
                        <div style="margin-top: 20px">
                          班前加班少于<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟，不计入加班
                        </div>
                        <div style="margin-top: 20px">
                          班后加班少于<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟，不计入加班
                        </div>
                        <div style="margin-top: 20px">
                          累计加班少于<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟，不计入加班
                        </div>
                        <div>扣除休息时间 <el-switch v-model="valueKc" /></div>
                        <div v-if="valueKc === true" class="xztj">
                          <el-radio-group v-model="xxradio1" class="ml-4">
                            <el-radio :value="1" size="large"
                              >按审批时长计算</el-radio
                            >
                            <el-radio
                              :style="xxradio1 === 1 ? 'margin-top: 50px' : ''"
                              :value="2"
                              size="large"
                              >在审批的时段内，按打卡时长计算</el-radio
                            >
                          </el-radio-group>
                          <div v-if="xxradio1 === 1" class="xx">
                            休息开始：<el-time-picker
                              style="width: 70px"
                              v-model="startvalue"
                              placeholder="Arbitrary time"
                            />休息结束：<el-time-picker
                              style="width: 70px"
                              v-model="endvalue"
                              placeholder="Arbitrary time"
                            />
                          </div>
                          <div
                            v-if="xxradio1 === 2"
                            style="bottom: 0; position: relative"
                          >
                            每天加班满<el-input
                              style="width: 50px"
                              v-model="jbvalue1"
                              placeholder="Arbitrary time"
                            />小时，扣除<el-input
                              style="width: 50px"
                              v-model="kcvalue"
                              placeholder="Arbitrary time"
                            />小时
                          </div>
                        </div>
                      </div>
                      <div style="margin-top: 20px">
                        <div>
                          加班时长计为调休或加班费
                          <el-switch v-model="scfvalue" />
                        </div>
                        <div v-if="scfvalue" class="xztj">
                          <el-radio-group v-model="scfradio" class="ml-4">
                            <el-radio :value="1" size="large"
                              >计为调休</el-radio
                            >
                            <el-radio
                              :style="scfradio === 1 ? 'margin-top: 50px' : ''"
                              :value="2"
                              size="large"
                              >计为加班费</el-radio
                            >
                            <el-radio
                              v-if="radioJs1 !== 3"
                              :value="3"
                              size="large"
                              >员工自主选择</el-radio
                            >
                          </el-radio-group>
                          <div
                            v-if="scfradio === 1"
                            style="top: -123px; position: relative"
                          >
                            按照1：<el-input
                              style="width: 50px"
                              v-model="azvalue1"
                              placeholder="Arbitrary time"
                            />计为调休时长，并关联假期项：调休
                          </div>
                          <div
                            v-if="scfradio === 3"
                            style="bottom: 0; position: relative"
                          >
                            按照1：<el-input
                              style="width: 50px"
                              v-model="azvalue2"
                              placeholder="Arbitrary time"
                            />计为调休时长，并关联假期项：调休
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="节假日" name="third">
                    <div>允许加班 <el-switch v-model="valueJb2" /></div>
                    <div v-if="valueJb2">
                      <!-- <div class="jb">
                        <el-radio-group v-model="radioJb1" class="ml-4">
                          <el-radio :value="1" size="large">允许班前和班后加班</el-radio>
                          <el-radio :value="2" size="large">仅允许班前加班</el-radio>
                          <el-radio :value="3" size="large">仅允许班后加班</el-radio>
                        </el-radio-group>
                      </div> -->
                      <div class="xztj">
                        <p>计算方式</p>
                        <el-radio-group v-model="radioJs" class="ml-4">
                          <el-radio :value="1" size="large"
                            >按审批时长计算</el-radio
                          >
                          <el-radio :value="2" size="large"
                            >在审批的时段内，按打卡时长计算</el-radio
                          >
                          <el-radio :value="3" size="large"
                            >无需审批，按打卡时长计算</el-radio
                          >
                        </el-radio-group>
                      </div>
                      <div>
                        <p>加班起算时间</p>
                        <div style="margin-top: 20px">
                          下班<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟后开始算加班
                        </div>
                      </div>
                      <div>
                        <p>最小加班时间</p>
                        <div style="margin-top: 20px">
                          班前加班少于<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟，不计入加班
                        </div>
                        <div style="margin-top: 20px">
                          班后加班少于<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟，不计入加班
                        </div>
                        <div style="margin-top: 20px">
                          累计加班少于<el-input
                            v-model="input"
                            style="width: 100px"
                            placeholder="请输入时间"
                          />分钟，不计入加班
                        </div>
                        <div>扣除休息时间 <el-switch v-model="valueKc" /></div>
                        <div v-if="valueKc === true" class="xztj">
                          <el-radio-group v-model="xxradio" class="ml-4">
                            <el-radio :value="1" size="large"
                              >按审批时长计算</el-radio
                            >
                            <el-radio
                              :style="xxradio === 1 ? 'margin-top: 50px' : ''"
                              :value="2"
                              size="large"
                              >在审批的时段内，按打卡时长计算</el-radio
                            >
                          </el-radio-group>
                          <div v-if="xxradio === 1" class="xx">
                            休息开始：<el-time-picker
                              style="width: 70px"
                              v-model="startvalue"
                              placeholder="Arbitrary time"
                            />休息结束：<el-time-picker
                              style="width: 70px"
                              v-model="endvalue"
                              placeholder="Arbitrary time"
                            />
                          </div>
                          <div
                            v-if="xxradio === 2"
                            style="bottom: 0; position: relative"
                          >
                            每天加班满<el-input
                              style="width: 50px"
                              v-model="jbvalue"
                              placeholder="Arbitrary time"
                            />小时，扣除<el-input
                              style="width: 50px"
                              v-model="kcvalue"
                              placeholder="Arbitrary time"
                            />小时
                          </div>
                        </div>
                      </div>
                      <div style="margin-top: 20px">
                        <div>
                          加班时长计为调休或加班费
                          <el-switch v-model="scfvalue" />
                        </div>
                        <div v-if="scfvalue" class="xztj">
                          <el-radio-group v-model="scfradio" class="ml-4">
                            <el-radio :value="1" size="large"
                              >计为调休</el-radio
                            >
                            <el-radio
                              :style="scfradio === 1 ? 'margin-top: 50px' : ''"
                              :value="2"
                              size="large"
                              >计为加班费</el-radio
                            >
                            <el-radio
                              v-if="radioJs !== 3"
                              :value="3"
                              size="large"
                              >员工自主选择</el-radio
                            >
                          </el-radio-group>
                          <div
                            v-if="scfradio === 1"
                            style="top: -123px; position: relative"
                          >
                            按照1：<el-input
                              style="width: 50px"
                              v-model="jbvalue"
                              placeholder="Arbitrary time"
                            />计为调休时长，并关联假期项：调休
                          </div>
                          <div
                            v-if="scfradio === 3"
                            style="bottom: 0; position: relative"
                          >
                            按照1：<el-input
                              style="width: 50px"
                              v-model="jbvalue"
                              placeholder="Arbitrary time"
                            />计为调休时长，并关联假期项：调休
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-form-item>
              <el-form-item>
                <!-- <el-button @click="cancelClickAddWork">取消</el-button>
                <el-button type="primary" @click="sureClickAddWork">确认</el-button> -->
              </el-form-item>
            </el-form>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="overtime = false">取消</el-button>
          <el-button type="primary" @click="overtime = false">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增外勤规则弹框 -->
    <el-drawer v-model="beside" direction="rtl">
      <template #header>
        <h4 style="color: black">编辑外勤规则</h4>
      </template>
      <template #default>
        <div>
          <div style="display: flex; align-items: center">
            <p>允许外勤打卡</p>
            <el-switch
              v-model="legworkConfigObj.isAllow"
              size="small"
              style="margin-left: 10px"
              @change="handleWQ"
            />
          </div>
          <!-- 外勤打卡多选框 -->
          <div v-if="legworkConfigObj.isAllow === true">
            <div>
              <el-checkbox v-model="legworkConfigObj.isApproval"
                >外勤打卡需审批</el-checkbox
              >
            </div>
            <div>
              <el-checkbox v-model="legworkConfigObj.isRemark"
                >外勤打卡需填写备注</el-checkbox
              >
            </div>
            <div>
              <el-checkbox v-model="legworkConfigObj.isPhoto"
                >外勤打卡需拍照</el-checkbox
              >
            </div>
            <div>
              <el-checkbox v-model="legworkConfigObj.isHideAddress"
                >允许员工隐藏详细地址</el-checkbox
              >
            </div>
            <div style="display: flex; align-items: center">
              <p>允许地点微调</p>
              <el-switch
                v-model="legworkConfigObj.isFineTuning"
                size="small"
                style="margin-left: 10px"
              />
            </div>
          </div>
          <!-- 开关显示隐藏 -->
          <div v-if="legworkConfigObj.isFineTuning == true">
            微调范围
            <el-select
              v-model="legworkConfigObj.fineTuningNum"
              placeholder="50米"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <!-- 外勤打卡需审批的显示隐藏内容 -->
          <div
            style="
              width: 540px;
              height: 200px;
              background-color: #f6f6f6;
              display: flex;
              flex-direction: column;
              padding-left: 20px;
              border-radius: 10px;
              margin-top: 15px;
            "
            v-if="
              legworkConfigObj.isApproval == true &&
              legworkConfigObj.isAllow == true
            "
          >
            <div>
              <p>审批范围</p>
              <el-radio-group v-model="legworkConfigObj.approvalRange">
                <el-radio :value="1">全天外勤打卡需审批</el-radio>
                <el-radio :value="2">上班外勤打卡需审批</el-radio>
                <el-radio :value="3">下班外勤打卡需审批</el-radio>
              </el-radio-group>
            </div>

            <div>
              <p>审批方式</p>
              <el-radio-group v-model="legworkConfigObj.approvalWay">
                <el-radio :value="1">先审批，后打卡</el-radio>
                <el-radio :value="2">先打卡，后审批</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="beside = false">取消</el-button>
          <el-button type="primary" @click="fieldRulesDialog">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增休息日打卡规则弹框 -->
    <el-drawer v-model="rest" direction="rtl">
      <template #header>
        <h4 style="color: black">休息日打卡规则</h4>
      </template>
      <template #default>
        <div>
          <div>
            <p>休息日打卡开始时间</p>
            <div>
              <span style="font-size: 14px">每天</span>
              <el-time-picker
                v-model="form.dayOffRule.resetTime"
                placeholder="请选择时间"
                style="width: 120px; margin-left: 10px"
                value-format="HH:mm:ss"
              />
              <span style="font-size: 14px"> 开始新一天的考勤打卡</span>
            </div>
          </div>
          <div>
            <p style="font-size: 14px; margin-top: 20px">休息日打卡方式</p>
            <div>
              <el-radio-group v-model="form.dayOffRule.type">
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    margin-top: 10px;
                  "
                >
                  <el-radio :value="1" style="color: black"
                    >标准打卡模式</el-radio
                  >
                  <span style="font-size: 12px; color: #747677"
                    >第1次打卡是上班，第2次打卡是下班，后续更新下班打卡</span
                  >
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    margin-top: 10px;
                  "
                >
                  <el-radio :value="2" style="color: black"
                    >严格打卡模式</el-radio
                  >
                  <span style="font-size: 12px; color: #747677"
                    >1次上班，1次下班交替打卡</span
                  >
                </div>
              </el-radio-group>
            </div>
          </div>
          <div>
            <!-- 时间间隔器 -->
            <div style="margin-top: 20px">
              <p style="font-size: 14px">最小打卡间隔</p>
              <div style="margin-top: 20px; display: flex; align-items: center">
                <span style="font-size: 14px; margin-right: 8px">上班打卡</span>
                <cascader-timeSe
                  :endHour="12"
                  :endMinute="59"
                  :defaultSelectedTime="defaultOffDutyTime"
                  @timeChange="handleOffDutyTime"
                />
                <span style="font-size: 14px; margin-left: 10px"
                  >后可打下班卡</span
                >
              </div>
            </div>
            <div>
              <div
                style="margin-top: 20px; display: flex; align-items: center"
                v-if="form.dayOffRule.type == 2"
              >
                <span style="font-size: 14px; margin-right: 8px">下班打卡</span>
                <cascader-timeSe
                  :endHour="12"
                  :endMinute="59"
                  :defaultSelectedTime="defaultOnDutyTime"
                  @timeChange="handleOnDutyTime"
                />
                <span style="font-size: 14px; margin-left: 10px"
                  >后可打上班卡</span
                >
              </div>
            </div>
          </div>
          <div style="font-size: 16px; margin-top: 10px">
            <el-checkbox v-model="form.dayOffRule.isApprove"
              >休息日打卡需审批</el-checkbox
            >
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="rest = false">取消</el-button>
          <el-button type="primary" @click="rest = false">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增补卡规则弹框 -->
    <el-drawer v-model="replace" direction="rtl" @open="handleOpenReplace">
      <template #header>
        <h4 style="color: black">补卡规则</h4>
      </template>
      <template #default>
        <div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-top: 20px;
            "
          >
            <div>
              <!-- <el-button
                type="primary"
                plain
                :icon="Plus"
                @click="handleAdd1 = true"
                >新增补卡规则</el-button
              > -->
            </div>
            <div>
              <el-input
                v-model="queryParamsCard.name"
                style="max-width: 200px; margin-left: 10px"
                placeholder="请输入规则名称"
                @change="cardListPostFun"
              >
                <template #append>
                  <el-button :icon="Search" link />
                </template>
              </el-input>
            </div>
          </div>
          <div style="margin-top: 20px" class="card-table">
            <!-- <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="规则名称" width="120" />
              <el-table-column prop="name" label="规则内容" width="120" />
              <el-table-column prop="address" label="应用范围" />
              <el-table-column fixed="right" label="操作" width="120">
                <template #default>
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleClick"
                  >
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table> -->
            <el-table
              ref="radioTableCard"
              :data="cardList"
              :header-cell-style="{
                background: '#eef1f6',
                color: '#909399',
              }"
              border
              style="width: 100%; margin-top: 10px"
              fixed
              @row-click="rowClickCard"
              @selection-change="selectionChangeCard"
              stripe
            >
              <el-table-column type="selection"> </el-table-column>
              <el-table-column
                label="规则名称"
                align="center"
                prop="name"
                width="100"
              />
              <el-table-column label="规则内容" align="center">
                <template #default="scope">
                  <div>
                    {{ scope.row.isRemedy == 0 ? "不允许补卡" : "" }}
                  </div>

                  <div>
                    {{ scope.row.isRemedy == 0 ? "不允许补卡" : "" }}
                  </div>
                  <div v-if="scope.row.isRemedy != 0">
                    补卡次数：每个月可提交{{ scope.row.allowNum }}次；每月的{{
                      scope.row.countDayNum
                    }}日起算
                  </div>
                  <div v-if="scope.row.isRemedy != 0">
                    补卡时限：可申请最近{{ scope.row.dayLimit }}个{{
                      handleDayType(scope.row.dayType)
                    }}内的补卡
                  </div>
                  <div v-if="scope.row.isRemedy != 0">
                    $补卡类型：<span
                      v-for="item in scope.row.type"
                      :key="item"
                      >{{ handleType(item) + "  " }}</span
                    >
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="应用范围" align="center">
                <template #default="scope">
                  <span
                    style="margin-left: 10px"
                    v-for="item in scope.row.groupIds"
                    :key="item"
                    >{{ handleGroupIdsShow(item) }}</span
                  >
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="totalCard > 0"
              :total="totalCard"
              v-model:page="queryParamsCard.pageNum"
              v-model:limit="queryParamsCard.pageSize"
              @pagination="cardListPostFun"
            />
          </div>

          <!-- <div style="width:540px;height: 100px;background-color: #f6f6f6;border-radius:10px;padding-left: 10px;display: flex;flex-direction: column;justify-content: center;">
        <p style="font-size: 14px;">员工可以通过以下审批单提交补卡申请</p>
        <el-button size="large" :icon="CirclePlus" style="width: 120px;">补卡申请</el-button>
        </div> -->
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="replace = false">取消</el-button>
          <el-button type="primary" @click="replace = false">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增拍照验证规则弹框 -->
    <el-drawer v-model="photo" direction="rtl">
      <template #header>
        <h4 style="color: black">拍照验证规则</h4>
      </template>
      <template #default>
        <div>
          <div>
            <div style="display: flex; align-items: center; font-size: 14px">
              <p>拍照打卡</p>
              <el-switch
                v-model="form.isPhotoClockIn"
                size="small"
                style="margin-left: 10px"
              />
            </div>
            <span style="font-size: 14px; color: grey">
              员工打卡时需拍照，照片会存档
            </span>
          </div>
          <!-- <div>
        <div  style="display: flex;align-items: center;font-size: 14px;">
          <p>人脸识别</p>
          <el-switch v-model="face" size="small" style="margin-left: 10px;"/>
        </div>
        <span style="font-size: 14px;color: grey">
          员工打卡时自动验证人脸，照片不存档
        </span>
      </div> -->
          <!-- 人脸识别显示隐藏内容 -->
          <!-- <div v-if="face ==true">
        <div>
          <p  style="font-size: 14px;">真人验证</p>
          <el-checkbox label="开启真人验证" style="margin-top:-5px" />
        </div>
        <div>
          <p style="font-size: 14px;">
            人脸录入管理
          </p>
          <div style="display: flex;">
            <span style="color:gray;font-size:14px;">仅支持手机端管理</span>
          <div style="display: flex;align-items: center;margin-left: 10px">
            <img src="../../assets/images/login-background.jpg" style="width:20px;height: 20px;"/>
            <el-button type="primary" link>扫码管理人脸</el-button>
          </div>
        </div>
        </div>
      </div> -->
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="photo = false">取消</el-button>
          <el-button type="primary" @click="photo = false">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 考勤人员选择嵌套弹框 -->
    <el-dialog v-model="useradd" :show-close="false" width="60%" align-center>
      <template #header>
        <div class="my-header">
          <h4>选择部门与成员</h4>
        </div>
      </template>
      <el-transfer
        v-model="csvalue"
        filterable
        filter-placeholder="State Abbreviations"
        :data="dataTr"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="useradd = false"> 确定 </el-button>
          <el-button @click="useradd = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 无需考勤人员选择嵌套弹框 -->
    <el-dialog v-model="nouseradd" :show-close="false" width="60%" align-center>
      <template #header>
        <div class="my-header">
          <h4>选择部门与成员</h4>
        </div>
      </template>
      <el-transfer
        v-model="wxvalue"
        filterable
        filter-placeholder="State Abbreviations"
        :data="dataTr"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="nouseradd = true"> 确定 </el-button>
          <el-button @click="nouseradd = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增考勤组负责人嵌套弹框 -->
    <el-dialog v-model="mainuser" :show-close="false" width="60%" align-center>
      <template #header>
        <div class="my-header">
          <h4>选择负责人</h4>
        </div>
      </template>
      <el-transfer
        v-model="fzvalue"
        filterable
        filter-placeholder="State Abbreviations"
        :data="dataTr"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="mainsuer = true"> 确定 </el-button>
          <el-button @click="mainuser = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增考勤组子负责人嵌套弹框 -->
    <el-dialog v-model="child" :show-close="false" width="60%" align-center>
      <template #header>
        <div class="my-header">
          <h4>选择人员</h4>
        </div>
      </template>
      <el-transfer
        v-model="zfzvalue"
        filterable
        filter-placeholder="State Abbreviations"
        :data="dataTr"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="child = true"> 确定 </el-button>
          <el-button @click="child = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增补卡规则按钮嵌套弹框 -->
    <el-drawer v-model="handleAdd1" direction="rtl">
      <template #header>
        <div style="display: flex; align-items: center">
          <span @click="goBackByIcon1()">
            <el-icon><Back /></el-icon>
          </span>
          <h4 style="color: black; margin-left: 10px">新增补卡规则</h4>
        </div>
      </template>
      <template #default>
        <div>
          <div>
            <el-form :model="form1" :rules="rules">
              <el-form-item label="规则名称" prop="postName">
                <el-input
                  v-model="form.postName"
                  placeholder="请输入"
                  maxlength="30"
                  show-word-limit
                  style="width: 240px"
                />
              </el-form-item>
            </el-form>
          </div>
          <div>
            <p style="font-size: 14px">应用范围</p>
            <div style="display: flex">
              <el-select
                v-model="firstvalue"
                placeholder="请选择"
                style="width: 150px"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="secondvalue"
                placeholder="未设置"
                @click="yysvalue = true"
                style="margin-left: 10px"
              >
              </el-select>
            </div>
          </div>
          <div>
            <p style="font-size: 14px">负责人</p>
            <el-select
              v-model="thirdvalue"
              placeholder="未设置"
              @click="fzrvalue = true"
            >
            </el-select>
          </div>
          <div style="display: flex; align-items: center; font-size: 14px">
            <p>允许补卡</p>
            <el-switch
              v-model="bkswitch"
              size="small"
              style="margin-left: 10px"
              @change="bkswitch1"
            />
          </div>
        </div>
        <!-- 允许补卡隐藏内容 -->
        <div style="font-size: 14px" v-if="bkswitch == true">
          <div>
            <p>补卡次数</p>
            <div>
              <span>每月可提交</span>
              <el-input-number
                v-model="num"
                :min="1"
                :max="10"
                controls-position="right"
                @change="handleChange"
                style="width: 100px; margin-left: 10px"
              />
              <span style="margin-left: 10px">次补卡,</span>
              <span style="margin-left: 10px">每月的</span>
              <el-select
                v-model="Timevalue1"
                placeholder="请选择"
                style="width: 100px; margin-left: 10px"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <span style="margin-left: 10px">起算</span>
            </div>
          </div>
          <div>
            <p>补卡时限</p>
            <div>
              <span style="margin-left: 10px">可申请过去</span>
              <el-input-number
                v-model="num1"
                :min="1"
                :max="30"
                controls-position="right"
                @change="handleChange1"
                style="margin-left: 10px; width: 100px"
              />
              <el-select
                v-model="Datevalue"
                placeholder="请选择"
                style="width: 100px; margin-left: 10px"
              >
                <el-option
                  v-for="item in options4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <span style="margin-left: 10px">内的补卡</span>
            </div>
          </div>
          <div>
            <p style="font-size: 14px">补卡类型</p>
            <el-checkbox-group v-model="checkList3" style="font-size: 14px">
              <el-checkbox label="缺卡" :value="1" />
              <el-checkbox label="迟到" :value="2" />
              <el-checkbox label="早退" :value="3" />
              <el-checkbox label="正常" :value="4" />
            </el-checkbox-group>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增加班规则按钮嵌套弹框 -->
    <!-- <el-drawer v-model="handleAdd2" direction="rtl">
      <template #header>
        <h4 style="color: black">新增加班规则</h4>
      </template>
      <template #default>
        <div>
          <div>
            <el-form :model="form2" :rules="rules">
              <el-form-item label="规则名称" prop="postName1">
                <el-input
                  v-model="form2.postName"
                  placeholder="请输入"
                  maxlength="30"
                  show-word-limit
                  style="width: 240px"
                />
              </el-form-item>
            </el-form>
          </div>
          <div>
            <p style="font-size: 14px">应用范围</p>
            <el-select
              v-model="yysvalue1"
              placeholder="未设置"
              @click="yysvalue1 = true"
            >
            </el-select>
          </div>
          <div>
            <p style="font-size: 14px">负责人</p>
            <el-select
              v-model="fzrvalue1"
              placeholder="未设置"
              @click="fzrvalue1 = true"
              style="width: 200px"
            >
            </el-select>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer> -->
    <!-- 新增补卡规则按钮中应用范围嵌套弹框 -->
    <el-dialog v-model="yysvalue" :show-close="false" width="800" align-center>
      <template #header>
        <div style="text-align: center; font-size: 20px">
          <h4>请选择考勤组</h4>
        </div>
      </template>
      <el-transfer v-model="transfer" :data="dataTr" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="yysvalue = true"> 确定 </el-button>
          <el-button @click="yysvalue = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增补卡规则按钮中负责人嵌套弹框 -->
    <el-dialog v-model="fzrvalue" :show-close="false" width="800" align-center>
      <template #header>
        <div style="text-align: center; font-size: 20px">
          <h4>选择负责人</h4>
        </div>
      </template>
      <el-transfer v-model="transfer" :data="dataTr" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="fzrvalue = true"> 确定 </el-button>
          <el-button @click="fzrvalue = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增加班规则按钮中应用范围嵌套弹框 -->
    <el-dialog v-model="yysvalue1" :show-close="false" width="800" align-center>
      <template #header>
        <div style="text-align: center; font-size: 20px">
          <h4>请选择考勤组</h4>
        </div>
      </template>
      <el-transfer v-model="transfer" :data="dataTr" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="yysvalue1 = true"> 确定 </el-button>
          <el-button @click="yysvalue1 = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增加班规则按钮中负责人嵌套弹框 -->
    <el-dialog
      v-model="showTransfer"
      :show-close="false"
      width="800"
      align-center
    >
      <template #header>
        <div>
          <h4 style="text-align: center; font-size: 20px">选择负责人</h4>
        </div>
      </template>
      <el-transfer v-model="transfer" :data="dataTr" />
      <template #footer>
        <div>
          <el-button type="primary" @click="showTransfer = false">
            确定
          </el-button>
          <el-button @click="showTransfer = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增添加办公WIFI弹框 -->
    <el-dialog
      v-model="wifiDialog"
      title="添加办公WIFI"
      width="500"
      align-center
    >
      <el-form
        label-width="auto"
        ref="formWIFI"
        :model="formLabelAlign"
        :rules="rulesWIFI"
        style="max-width: 600px; margin-top: 10px"
      >
        <el-form-item label="名称">
          <el-input
            v-model="formLabelAlign.name"
            maxlength="10"
            placeholder="最多不超过15个字"
          />
        </el-form-item>
        <el-form-item label="MAC地址" prop="macAddress">
          <el-input
            v-model="formLabelAlign.macAddress"
            placeholder="请输入MAC地址 例如：02:10:18:02:40:7b"
          />
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        名称尽量保持与考勤WiFi名称一致，避免员工产生误解
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="wifiDialog = false">取消</el-button>
          <el-button type="primary" @click="handleAddWiFi"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 自定义对班时段设置按钮 -->
    <el-drawer v-model="set" direction="rtl">
      <template #header>
        <div style="display: flex; align-items: center">
          <span @click="goBackByIcon2()">
            <el-icon><Back /></el-icon>
          </span>
          <h4 style="color: black; margin-left: 20px">自定义对班时段</h4>
        </div>
      </template>
      <template #default>
        <div>
          <div
            style="
              width: 540px;
              height: 150px;
              background-color: rgba(23, 26, 29, 0.04);
              border: 1px solid rgba(23, 26, 29, 0.04);
              border-radius: 6px;
            "
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 6px;
                border-bottom: 1px solid rgba(23, 26, 29, 0.04);
              "
            >
              <span style="margin-left: 10px"
                ><el-badge is-dot>
                  <i class="el-icon-bell"></i>
                </el-badge>
                <span style="margin-left: 10px; font-size: 14px">全天</span>
              </span>
              <span>
                <el-checkbox v-model="checked4" style="font-size: 14px"
                  >参与自动对班</el-checkbox
                >
              </span>
            </div>
            <div style="padding: 11px 12px 12px">
              <div style="display: flex; line-height: 22px; font-size: 14px">
                <span style="color: rgba(23, 26, 29, 0.6); margin-right: 8px"
                  >上下班时间段</span
                >
                <span style="color: #171a1d; flex: 1">09:00-17:00</span>
              </div>
              <div
                style="
                  margin-top: 8px;
                  line-height: 32px;
                  display: flex;
                  font-size: 14px;
                "
              >
                <span style="color: rgba(23, 26, 29, 0.6); margin-right: 8px"
                  >自动对班时段</span
                >
                <span style="color: #171a1d">
                  <div style="display: flex">
                    <span style="margin-right: 8px">第1次上班前</span>
                    <span>
                      <el-time-picker
                        v-model="time"
                        placeholder="选择时间"
                        style="width: 100px; margin-right: 8px"
                      />
                    </span>
                    <span style="margin-right: 8px"
                      ><el-icon><ArrowRight /></el-icon
                    ></span>
                    <span style="margin-right: 8px">第1次上班后</span>
                    <span>
                      <el-time-picker
                        v-model="time3"
                        placeholder="选择时间"
                        style="width: 100px"
                      />
                    </span>
                  </div>
                </span>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 新增排班周期 -->
    <el-dialog
      v-model="sortdialog"
      title="新增排班周期"
      width="500"
      align-center
    >
      <template #default>
        <div>
          <div style="margin-bottom: 14px; font-size: 14px">
            <p>周期名称</p>
            <el-input
              v-model="text"
              style="max-width: 160px"
              maxlength="6"
              placeholder="请输入"
              show-word-limit
              type="text"
            />
          </div>
          <div style="margin-bottom: 14px; font-size: 14px">
            <p>周期天数</p>
            <div>
              <span>以</span>
              <el-input-number
                v-model="weeknum"
                :min="2"
                :max="31"
                controls-position="right"
                @change="weekChange"
              />
              <span> 天为周期进行循环，最大周期天数为31天 </span>
            </div>
          </div>
          <div style="margin-bottom: 14px; font-size: 14px">
            <p>设置班次</p>
            <div style="display: flex; flex-direction: column">
              <div style="display: flex; align-items: center">
                <span>第1天:</span>
                <el-select v-model="shiftvalue" style="width: 240px">
                  <el-option
                    v-for="item in shiftoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div style="display: flex; align-items: center; margin-top: 20px">
                <span>第2天:</span>
                <el-select v-model="shiftvalue2" style="width: 240px">
                  <el-option
                    v-for="item in shiftoptions2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </template>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="sortdialog = false">取消</el-button>
          <el-button type="primary" @click="sortdialog = false">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加打卡方式-地点打卡调用高德地图 -->
    <el-dialog
      v-model="GDDialog"
      title="添加考勤地点(1/2)"
      width="830"
      align-center
    >
      <gd-dialog
        @address="handleAddressClick"
        :addressClick="() => {}"
        @get-coverage="getCoverage"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="GDDialog = false">取消</el-button>
          <el-button
            type="primary"
            @click="(GDDialog = false), (locationDetailsDialog = true)"
          >
            下一步
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加打卡方式-地点打卡调用高德地图 -->
    <el-dialog
      v-model="locationDetailsDialog"
      title="添加考勤地点(2/2)"
      width="480"
      align-center
    >
      <div>
        <span style="margin: 10px 0px; display: inline-block">地点名称</span>
        <el-input
          v-model="addressListObj.nameDetail"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div
        style="font-size: 14px; color: rgba(17, 31, 44, 0.4); margin: 10px 0px"
      >
        输入名称方便员工识别打卡地点
      </div>
      <div style="font-size: 14px; color: rgba(17, 31, 44, 0.4)">
        考勤地点:
        {{ addressListObj.name }}
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="(locationDetailsDialog = false), (GDDialog = true)"
            >上一步</el-button
          >
          <el-button type="primary" @click="loctionConfirmation">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
import gdDialog from "./gdDialog.vue";
import { Plus, CircleCloseFilled } from "@element-plus/icons-vue";
import { Search } from "@element-plus/icons-vue";
import { ElTable } from "element-plus";
import selectShow from "../flyflow/components/orgselect/selectAndShow.vue";
import {
  getPeopleCountInfoApi,
  getOvertimeListApi,
  getGroupListApi,
  attendanceAddPost,
  attendanceGetPost,
  getAttendanceShiftApi,
  getDayOffRuleApi,
  getLegworkConfigApi,
  getClockInDetailsApi,
  attendanceUpdatePost,
} from "@/api/attendance/attendance";
import { shiftListPost } from "@/api/attendance/shift.js";
import cascaderTimeSe from "./cascaderTimeSe.vue";
import { cardListPost } from "@/api/attendance/card";

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const titleByRules = ref("选择加班规则");
const checkRules = ref(true);
const sortdialog = ref(false);
const input = ref("");
const text = ref("");
const wifiDialog = ref(false);
const valueJb = ref(false);
const valueJb1 = ref(false);
const valueJb2 = ref(false);
const radioJb1 = ref(null);
const radioJs = ref(null);
const radioJs1 = ref(null);
const azvalue1 = ref(null);
const azvalue2 = ref(null);
const valueKc = ref(false);
const startvalue = ref();
const endvalue = ref();
const jbvalue = ref();
const jbvalue1 = ref();
const kcvalue = ref();
const xxradio = ref(null);
const xxradio1 = ref(null);
const scfradio = ref(null);
const scfvalue = ref(false);
const fwvalue = ref(null);
// 新增补卡规则按钮嵌套弹框中下拉选择框
const firstvalue = ref(null);
const secondvalue = ref(null);
const thirdvalue = ref(null);
const fzsele = ref(null);
const set = ref(false);
const time3 = ref("");
// 周期天数
const weeknum = ref(null);
const formLabelAlign = ref({});
// 考勤人员
const user = ref(false);
// 考勤组负责人
const person = ref(false);
// 考勤时间
const Time = ref(false);
// 打卡方式
const method = ref(false);
//  加班规则
const overtime = ref(false);
// 外勤规则
const beside = ref(false);
// /休息日打卡规则
const rest = ref(false);
// 打卡时间选择器
const shiftvalue = ref("");
const shiftvalue2 = ref("");
//  const value5=ref()
// 补卡规则
const replace = ref(false);
const handleAdd1 = ref(false);
// 加班规则
const handleAdd2 = ref(false);
// 拍照验证规则
const photo = ref(false);
// 考勤人员嵌套
const useradd = ref(false);
const nouseradd = ref(false);
// 考勤负责人嵌套
const mainuser = ref(false);
const child = ref(false);
// 打卡方式多选框
const checkList = ref([]);
// 允许打卡开关按钮
const bkswitch = ref(false);
// 补卡类型多选框
const checkList3 = ref([]);
// 允许补卡时间选择
const num = ref(0);
const Timevalue1 = ref(false);
const num1 = ref(0);
const Datevalue = ref(false);
// 自定义对班时段设置多选框
const checked4 = ref(false);
// 加班规则默认展示
const activeName = ref("first");
// 穿梭框
const generateData = () => {
  const data = [];
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    });
  }
  return data;
};
const dataTr = ref(generateData());
const transfer = ref([]);
const showTransfer = ref(false);
const handleOpenByDropdown = () => {
  // 请求人员名单数据
  showTransfer.value = true;
};
// 应用范围下拉框
// const yyvalue = ref(false);
const yysvalue = ref(false);
const fzrvalue = ref(false);
const yysvalue1 = ref(false);

// const inneruser = ref(false)
const centerDialogVisible = ref(false);
const handleClick1 = ref(false);
const data = reactive({
  form1: {},
  form2: {},
  rules: {
    postName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
    postName1: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  },
});
const { form1, rules, form2 } = toRefs(data);

const multipleTable = ref(null); //班次多选表格ref

// 固定班制时间表格
const tableData3 = ref([
  {
    workdayId: 1,
    workday: "周一",
    shiftId: "",
    select: true,
  },
  {
    workdayId: 2,
    workday: "周二",
    shiftId: "",
    select: true,
  },
  {
    workdayId: 3,
    workday: "周三",
    shiftId: "",
    select: true,
  },
  {
    workdayId: 4,
    workday: "周四",
    shiftId: "",
    select: true,
  },
  {
    workdayId: 5,
    workday: "周五",
    shiftId: "",
    select: true,
  },
  {
    workdayId: 6,
    workday: "周六",
    shiftId: "",
    select: false,
  },
  {
    workdayId: 7,
    workday: "周日",
    shiftId: "",
    select: false,
  },
]);
const multipleSelection = ref([]); //班次多选已选列表

const options = [
  {
    value: 50,
    label: "50米",
  },
  {
    value: 100,
    label: "100米",
  },
  {
    value: 500,
    label: "500米",
  },
  {
    value: 1000,
    label: "1000米",
  },
  {
    value: 5000,
    label: "5000米",
  },
];
// 应用范围下拉框option
const options2 = [
  {
    value: "考勤组",
    label: "考勤组",
  },
];
// 设置班次
const shiftoptions = [
  {
    value: "全天09:00-17:00",
    label: "全天09:00-17:00",
  },
  {
    value: "休息",
    label: "休息",
  },
];
const shiftoptions2 = [
  {
    value: "全天09:00-17:00",
    label: "全天09:00-17:00",
  },
  {
    value: "休息",
    label: "休息",
  },
];
// 补卡次数日期选择
const options3 = [
  {
    value: "1日",
    label: "1日",
  },
  {
    value: "2日",
    label: "2日",
  },
];
// 补卡时限日期选择
const options4 = [
  {
    value: "自然日",
    label: "自然日",
  },
  {
    value: "工作日",
    label: "工作日",
  },
];
const buttons = [{ type: "primary", text: "设置" }];

const departmentPersonnelGathering = ref([]);
const principalIds = ref([]);
// form表单在这里
const form = ref({
  name: "", //考勤组名称
  isAuto: true, //新成员是否自动加入
  deptIds: [], //参与考勤部门
  userIds: [], //参与考勤人员
  principalId: [], //主负责人
  groupType: 1, //考勤时间  1：固定班制 2：自由班制
  workShiftList: [], //考勤时间固定班次-工作日设置
  workHours: null, //自由工时-工作时长
  freedomWorkday: [], //自由工时-工作日
  clockInType: [], //打卡方式
  wifiList: [], //wifi地点集合
  addressList: [], //地点集合
  overtimeRuleId: "", //加班规则id
  remedyRuleId: "", //补卡规则id
  legworkConfig: {
    id: null,
  }, //外勤配置
  isPhotoClockIn: false, //是否开启拍照打卡
  dayOffRule: {
    resetTime: "05:00:00", //重置时间
    type: 1, //休息日打卡方式 1：标准打卡模式 2：严格打卡模式
    offDutyTime: null,
    onDutyTime: null,
    isApprove: false, //是否需要审批 0否 1是
  }, //休息日打卡规则
});
const addressListObj = ref({
  nameDetail: "",
  name: "",
  latitude: "",
  longitude: "",
  coverage: 300,
});
const legworkConfigObj = ref({
  isAllow: false, //是否允许外勤打卡 0否 1是
  isApproval: false, //外勤打卡是否需审批 0否 1是
  approvalRange: 1, //审批范围 1：全天外勤打卡需审批 2：上班外勤打卡需审批 3：下班外勤打卡需审批
  approvalWay: 1, //审批方式 1：先审批，后打卡2：先打卡，后审批
  isRemark: 0, //是否需要填写备注 0否 1是
  isPhoto: 0, //是否需要拍照 0否 1是
  isHideAddress: 0, //是否允许隐藏详细地址 0否 1是
  isFineTuning: false, //是否允许地址微调
  fineTuningNum: 0, //微调米数
});
const overtimeRuleRow = ref({});
const cardRuleRow = ref({});

const rulesWIFI = ref({
  macAddress: [
    { required: false, message: "请输入MAC地址", trigger: "blur" },
    {
      pattern: /^[^\u4e00-\u9fa5]*$/,
      message: "请输入正确MAC地址 格式如：02:10:18:02:40:7b",
      trigger: "blur",
    },
  ],
});
/**
 * 计算表格中补卡时限
 *
 * @param val
 */
const handleDayType = (val) => {
  if (val == 1) {
    return "工作日";
  } else if (val == 2) {
    return "自然日";
  } else {
    return "未知";
  }
};

const typeOptions = ref([
  {
    id: 1,
    name: "缺卡",
  },
  {
    id: 2,
    name: "迟到",
  },
  {
    id: 3,
    name: "早退",
  },
  {
    id: 4,
    name: "正常",
  },
]);

const rowId = ref("");

/**
 * 计算表格中补卡类型
 * @param val
 */
const handleType = (val) => {
  return (
    typeOptions.value.filter((item) => item.id == val)[0] &&
    typeOptions.value.filter((item) => item.id == val)[0].name
  );
};

// 工作时长
const time = ref();
// 新增考勤穿梭框数据
const csvalue = ref([]);
const wxvalue = ref([]);
// 新增负责人穿梭框数据
const fzvalue = ref([]);
const zfzvalue = ref([]);
// 打卡方式列表
const checkMethodList = ref([
  {
    id: 1,
    label: "地点打卡",
  },
  {
    id: 2,
    label: "Wi-Fi打卡",
  },
]);
// 打开高德地图对话框
const GDDialog = ref(false);
const locationDetailsDialog = ref(false);

// 获取地点打卡名称、经纬度
const handleAddressClick = (val) => {
  let data = val.split(",");
  addressListObj.value.name = data[0];
  addressListObj.value.longitude = data[1];
  addressListObj.value.latitude = data[2];
};

// 获取高德地点打卡范围
const getCoverage = (val) => {
  addressListObj.value.coverage = val;
};

// 地点打卡确认
const loctionConfirmation = () => {
  form.value.addressList.push(addressListObj.value);
  locationDetailsDialog.value = false;
};

// 监听考勤人员、部门变化
const dtoList = ref([]);

watch(
  () => departmentPersonnelGathering.value,
  (value) => {
    form.value.deptIds = [];
    form.value.userIds = [];

    dtoList.value = [];
    value.map((item) => {
      if (item.type == "dept") {
        dtoList.value.push({
          deptId: item.id,
          deptName: item.name,
        });

        form.value.deptIds.push(item.id);
      } else if ((item.type = "user")) {
        form.value.userIds.push(item.id);
      }
    });

    getPeopleCountInfo(dtoList.value);
  }
);

const handleOpenGD = () => {
  GDDialog.value = true;
};

const attendanceTableList = ref([]);
/**
 * 部门考勤人数表格数据
 * @param list
 */
const getPeopleCountInfo = (list) => {
  list.length != 0
    ? getPeopleCountInfoApi(list).then((res) => {
        attendanceTableList.value = res.data.map((item) => {
          item["state"] = false;
          return item;
        });
      })
    : (attendanceTableList.value = []);
};

/**
 * 实现班次表格单选
 */
const selectData = ref({});
const radioTable = ref(null);
// 表格的选中 可以获得当前选中的数据 单选框
const selectionChange = (val) => {
  if (val.length > 1) {
    radioTable.value.clearSelection();
    radioTable.value.toggleRowSelection(val.pop());
  } else {
    selectData.value = val.pop();
  }
};

// 表格某一行的单击事件 选择行
const rowClick = (row, column) => {
  radioTable.value.toggleRowSelection(row);

  if (currentRow.value == null) {
    tableData3.value.map((item) => {
      multipleTable.value.toggleRowSelection(item, true);
      item.defaultShiftText = `班次 ${row.name}：${row.officeTime}-${row.closingTime}`;
      item.shiftId = row.id;
    });
  } else {
    multipleTable.value.toggleRowSelection(currentRow.value, true);
    // 更改选择行的班次时间段
    multipleSelection.value.map((item) => {
      if (item.workdayId == currentRow.value.workdayId) {
        item.defaultShiftText = `班次 ${row.name}：${row.officeTime}-${row.closingTime}`;
        item.shiftId = row.id;
      }
    });
  }
};

/**
 * 操作更改当前行的班次弹出框
 */
const currentRow = ref(null);
const handleCurrentRow = (row) => {
  currentRow.value = row;
  handleClick1.value = true;
};

/**
 * 获取班次列表
 */
const shiftList = ref([]);
const shiftName = ref("");
const defaultShiftText = ref("");
const defaultRow = ref({});
const getShiftList = () => {
  shiftListPost({
    pageNum: 1,
    pageSize: 999,
    name: shiftName.value,
  }).then((response) => {
    shiftList.value = response.rows;
    defaultRow.value = response.rows && response.rows[0];
    shiftList.value.length != 0
      ? (defaultShiftText.value = `班次 ${defaultRow.value.name}：${defaultRow.value.officeTime}-${defaultRow.value.closingTime}`)
      : (defaultShiftText.value = "");

    // 设置班次时间段默认值
    tableData3.value.map((item) => {
      item.defaultShiftText = "休息";
      item.shiftId = "";
    });
  });
};
getShiftList();

/**
 * 班次表格多选框选择
 * @param val
 */
const handleSelectionChange = (val) => {
  multipleSelection.value = val;

  multipleSelection.value.map((item) => {
    item.shiftId = defaultRow.value.id;
    item.defaultShiftText = `班次 ${defaultRow.value.name}：${defaultRow.value.officeTime}-${defaultRow.value.closingTime}`;
  });

  if (val.length == 0) {
    tableData3.value.map((item) => {
      item.shiftId = "";
      item.defaultShiftText = "休息";
    });
  }
};

/**
 * 自由工时工作时长
 * @param val
 */
const handleWorkHours = (val) => {
  form.value.workHours = `${val[0]}.${val[1]}`;
};

/**
 * 固定自由切换
 */
const switchAttendanceType = () => {
  if (form.value.groupType == 1) {
    form.value.workHours = null;
    form.freedomWorkday = [];

    // 设置默认周一到周五选中
    tableData3.value.forEach((row) => {
      if (row.select) {
        multipleTable.value.toggleRowSelection(row, true);
      }
    });
  } else if (form.value.groupType == 2) {
    form.value.workShiftList = [];
  }
};

/**
 * 添加WiFi弹窗确认框
 */
const handleAddWiFi = () => {
  proxy.$refs["formWIFI"].validate((valid) => {
    if (valid) {
      form.value.wifiList.push(formLabelAlign.value);
      wifiDialog.value = false;
      formLabelAlign.value = {};
    }
  });
};

/**
 * 获取加班规则接口
 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 999,
  name: "",
});
const totalOvertime = ref(0);
const overtimeList = ref([]);
const radioTableOvertime = ref(null);
const selectDataOvertime = ref({});

const getOvertimeList = () => {
  getOvertimeListApi(queryParams.value).then((response) => {
    overtimeList.value = response.rows;
    totalOvertime.value = Number(response.total);
  });
};
getOvertimeList();

// 选择加班规则
const rowClickOvertime = (row, column) => {
  radioTableOvertime.value.toggleRowSelection(row);
  form.value.overtimeRuleId = row.id;
  overtimeRuleRow.value = row;
};

const selectionChangeOvertime = (val) => {
  if (val.length > 1) {
    radioTableOvertime.value.clearSelection();
    radioTableOvertime.value.toggleRowSelection(val.pop());
  } else {
    selectDataOvertime.value = val.pop();
  }
};

/**
 * 获取补卡规则接口
 */
const queryParamsCard = ref({
  pageNum: 1,
  pageSize: 10,
  name: "",
});
const totalCard = ref(0);
const cardList = ref([]);
const radioTableCard = ref(null);
const selectDataCard = ref({});

const cardListPostFun = () => {
  cardListPost(queryParamsCard.value).then((response) => {
    cardList.value = response.rows;
    totalCard.value = Number(response.total);
  });
};
cardListPostFun();

// 选择补卡规则
const rowClickCard = (row, column) => {
  radioTableCard.value.toggleRowSelection(row);
  form.value.remedyRuleId = row.id;
  cardRuleRow.value = row;
};

const selectionChangeCard = (val) => {
  if (val.length > 1) {
    radioTableCard.value.clearSelection();
    radioTableCard.value.toggleRowSelection(val.pop());
  } else {
    selectDataCard.value = val.pop();
  }
};

const groupList = ref([]);
/**
 * 获取所有考勤组
 */
const getGroupList = () => {
  getGroupListApi().then((res) => {
    groupList.value = res.data;
  });
};
getGroupList();

/**
 * 计算表格应用范围
 * @param val
 */
const handleGroupIdsShow = (val) => {
  return (
    groupList.value.filter((item) => item.id == val)[0] &&
    groupList.value.filter((item) => item.id == val)[0].name
  );
};

/**
 * 外勤规则对话框确认按钮
 */
const fieldRulesDialog = () => {
  form.value.legworkConfig = {
    id: legworkConfigObj.value.id ? legworkConfigObj.value.id : null,
    isAllow: legworkConfigObj.value.isAllow == true ? 1 : 0,
    isApproval: legworkConfigObj.value.isApproval == true ? 1 : 0,
    approvalRange: legworkConfigObj.value.approvalRange,
    approvalWay: legworkConfigObj.value.approvalWay,
    isRemark: legworkConfigObj.value.isRemark == true ? 1 : 0,
    isPhoto: legworkConfigObj.value.isPhoto == true ? 1 : 0,
    isHideAddress: legworkConfigObj.value.isHideAddress == true ? 1 : 0,
    isFineTuning: legworkConfigObj.value.isFineTuning,
    fineTuningNum:
      legworkConfigObj.value.isFineTuning == true
        ? legworkConfigObj.value.fineTuningNum
        : 0,
  };

  beside.value = false;
};

/**
 * 设置上班最小打卡间隔
 * @param val
 */
const handleOffDutyTime = (val) => {
  if (0 >= val[0] <= 9) {
    val[0] = `0${val[0]}`;
  } else {
    val[0] = val[0];
  }
  if (0 >= val[1] <= 9) {
    val[1] = `0${val[1]}`;
  } else {
    val[1] = val[1];
  }

  form.value.dayOffRule.offDutyTime = `${val[0]}:${val[1]}`;
};

/**
 * 设置下班最小打卡间隔
 * @param val
 */
const handleOnDutyTime = (val) => {
  if (0 >= val[0] <= 9) {
    val[0] = `0${val[0]}`;
  } else {
    val[0] = val[0];
  }
  if (0 >= val[1] <= 9) {
    val[1] = `0${val[1]}`;
  } else {
    val[1] = val[1];
  }
  form.value.dayOffRule.onDutyTime = `${val[0]}:${val[1]}`;
};

/**
 * 保存设置
 */
const handSaveSettings = () => {
  console.log("form.value---", form.value);
  form.value.name == ""
    ? (centerDialogVisible.value = true)
    : (centerDialogVisible.value = false);

  form.value.userIds.length == 0 && form.value.deptIds.length == 0
    ? (centerDialogVisible.value = true)
    : (centerDialogVisible.value = false);

  principalIds.value.length == 0
    ? (centerDialogVisible.value = true)
    : (centerDialogVisible.value = false);

  form.value.wifiList.length == 0 && form.value.addressList.length == 0
    ? (centerDialogVisible.value = true)
    : (centerDialogVisible.value = false);

  form.value.principalId = principalIds.value[0] && principalIds.value[0].id;
  //考勤时间-固定班次
  if (form.value.groupType == 1) {
    form.value.workShiftList = multipleSelection.value.map((item) => {
      return {
        id: item.id ? item.id : undefined,
        workday: item.workdayId,
        shiftId: item.shiftId,
      };
    });
  }

  if (rowId.value) {
    // 修改
    attendanceUpdatePost(form.value).then((res) => {
      proxy.$modal.msgSuccess("修改成功");
      back();
    });
  } else {
    // 新增
    attendanceAddPost(form.value).then((res) => {
      proxy.$modal.msgSuccess("新增成功");
      back();
    });
  }
};

onMounted(() => {
  nextTick(() => {
    const getRowId = () => {
      rowId.value = route.query.rowId;

      if (rowId.value) {
        departmentPersonnelGathering.value = [];
        principalIds.value = [];
        attendanceGetPostFun();
      }
    };
    getRowId();
  });
});

const defaultWorkHours = ref([]);
// 请求编辑数据详情
const attendanceGetPostFun = () => {
  attendanceGetPost(rowId.value).then((res) => {
    if (res.code == 200) {
      const obj = res.data;
      form.value.id = obj.id;

      form.value.name = obj.name;

      if (obj.userVos.length != 0) {
        obj.userVos.map((item) => {
          item.type = "user";
        });
      }

      if (obj.deptVos.length != 0) {
        obj.deptVos.map((item) => {
          item.type = "dept";
        });
      }
      // 考勤人员
      departmentPersonnelGathering.value = [...obj.userVos, ...obj.deptVos];

      principalIds.value.push(obj.principalVo); //考勤组负责人

      form.value.groupType = obj.groupType; //考勤类型

      if (form.value.groupType == 1) {
        // 请求固定工作日班次
        getAttendanceShift(obj.workShiftIds);
      }
      if (form.value.groupType == 2) {
        // 请求自由工作日
        form.value.freedomWorkday = obj.freedomWorkday;
        defaultWorkHours.value = [
          Number(obj.workHours.split(".")[0]),
          Number(obj.workHours.split(".")[1]),
        ];
        form.value.workHours = obj.workHours;
      }

      form.value.clockInId = obj.clockInId;
      getClockInDetails(obj.clockInId); //打卡方式

      form.value.overtimeRuleId = obj.overtimeRuleId;
      getOverTimeFun(obj.overtimeRuleId); //加班规则

      getLegworkConfig(obj.legworkConfigId); //外勤规则

      getDayOffRule(obj.dayOffRuleId); //休息日打卡规则

      form.value.remedyRuleId = obj.remedyRuleId;
      getCardPostFun(obj.remedyRuleId); //补卡规则

      form.value.isPhotoClockIn = obj.isPhotoClockIn; //拍照验证规则
    }
  });
};

// 请求工作日班次
const getAttendanceShift = (workShiftIds) => {
  getAttendanceShiftApi(workShiftIds).then((res) => {
    // console.log("res.data", res.data);
    res.data.map((item) => {
      const defaultShiftText = shiftList.value.filter(
        (f) => f.id == item.shiftId
      )[0];

      multipleSelection.value.push({
        id: item.id,
        workdayId: item.workday,
        shiftId: item.shiftId,
        workday: tableData3.value.filter((f) => item.workday == f.workdayId)[0]
          .workday,
        defaultShiftText: `班次 ${defaultShiftText.name}：${defaultShiftText.officeTime}-${defaultShiftText.closingTime}`,
        select: true,
      });
    });
  });
};

const handleOpenTime = () => {
  nextTick(() => {
    tableData3.value.map((item) => {
      multipleSelection.value.map((mul) => {
        if (item.workdayId == mul.workdayId) {
          item.defaultShiftText = mul.defaultShiftText;
          item.shiftId = mul.shiftId;
          item.select = mul.select;
          item.id = mul.id;
        }
      });
    });
    // 默认选中的工作日
    tableData3.value.map((item) => {
      if (item.select) {
        multipleTable.value.toggleRowSelection(item, true);
      }
    });
  });
};

// 获取打卡详情
const getClockInDetails = (id) => {
  getClockInDetailsApi({
    clockInId: id,
  }).then((res) => {
    if (res.code == 200) {
      const data = res.data;
      form.value.clockInType = data.clockIn.type;
      form.value.addressList = data.address ? data.address : [];
      form.value.wifiList = data.wifi ? data.wifi : [];
    }
  });
};

// 加班规则
const getOverTimeFun = (id) => {
  // 获取不到之前请求的数据 所以又重新请求了一遍
  getOvertimeListApi(queryParams.value).then((response) => {
    overtimeList.value = response.rows;
    totalOvertime.value = Number(response.total);
    if (overtimeList.value.length != 0) {
      overtimeRuleRow.value = overtimeList.value.filter(
        (item) => item.id == id
      )[0];
    }
  });
};

// 点开加班规则抽屉默认选择已选规则
const handleOpenOverTime = () => {
  if (overtimeRuleRow.value.id) {
    nextTick(() => {
      radioTableOvertime.value.clearSelection();
      radioTableOvertime.value.toggleRowSelection(overtimeRuleRow.value, true);
    });
  }
};

// 是否允许外勤打卡规则开关
const handleWQ = () => {
  if (legworkConfigObj.value.isAllow == false) {
    form.value.legworkConfig = {
      id: legworkConfigObj.value.id ? legworkConfigObj.value.id : null,
      isAllow: false,
      isApproval: false,
      approvalRange: 1,
      approvalWay: 1,
      isRemark: 0,
      isPhoto: 0,
      isHideAddress: 0,
      isFineTuning: false,
      fineTuningNum: 0,
    };
  }
};

// 外勤打卡规则详情
const getLegworkConfig = (id) => {
  getLegworkConfigApi(id).then((res) => {
    if (res.code == 200) {
      legworkConfigObj.value = res.data;
      form.value.legworkConfig = {
        id: res.data.id,
        isAllow: legworkConfigObj.value.isAllow == true ? 1 : 0,
        isApproval: legworkConfigObj.value.isApproval == true ? 1 : 0,
        approvalRange: legworkConfigObj.value.approvalRange,
        approvalWay: legworkConfigObj.value.approvalWay,
        isRemark: legworkConfigObj.value.isRemark == true ? 1 : 0,
        isPhoto: legworkConfigObj.value.isPhoto == true ? 1 : 0,
        isHideAddress: legworkConfigObj.value.isHideAddress == true ? 1 : 0,
        isFineTuning: legworkConfigObj.value.isFineTuning,
        fineTuningNum:
          legworkConfigObj.value.isFineTuning == true
            ? legworkConfigObj.value.fineTuningNum
            : 0,
      };
    }
  });
};

// 从表格中筛选出 补卡规则详情
const getCardPostFun = (id) => {
  cardRuleRow.value = cardList.value.filter((item) => item.id == id)[0];
};

// 点开补卡规则抽屉默认选择已选规则
const handleOpenReplace = () => {
  if (cardRuleRow.value.id) {
    nextTick(() => {
      radioTableCard.value.clearSelection();
      radioTableCard.value.toggleRowSelection(cardRuleRow.value, true);
      // form.value.remedyRuleId = cardRuleRow.value.id;
    });
  }
};

// 休息日打卡规则详情
const defaultOffDutyTime = ref([0, 0]);
const defaultOnDutyTime = ref([0, 0]);
const getDayOffRule = (id) => {
  getDayOffRuleApi(id).then((res) => {
    if (res.code == 200) {
      form.value.dayOffRule = res.data;
      const one = res.data.offDutyTime.split(":");
      const two = res.data.onDutyTime.split(":");

      defaultOffDutyTime.value = [
        Number(removeLeadingZero(one[0])),
        Number(removeLeadingZero(one[1])),
      ];
      defaultOnDutyTime.value = [
        Number(removeLeadingZero(two[0])),
        Number(removeLeadingZero(two[1])),
      ];
    }
  });
};
// 检测字符串第一个数字是否为0 为0则删除
const removeLeadingZero = (str) => {
  if (str.charAt(0) === "0") {
    return str.substring(1); // 删除第一个字符
  }
  return str; // 如果第一个字符不是0，则返回原字符串
};

// 删除地点添加表格行
const handleDeletePlace = (row) => {
  form.value.addressList = form.value.addressList.filter(
    (item) => item.name !== row.name
  );
};

// 删除WIFI添加表格行
const handleDeleteWIFI = (row) => {
  form.value.wifiList = form.value.wifiList.filter(
    (item) => item.name !== row.name
  );
};

// 加班规则工作日选择tabs
const handleClickByWorkTabs = (val, event) => {
  console.log(val, event, "选择的数据");
};
// 图标返回新增加班规则
const goBackByIcon = () => {
  titleByRules.value = "选择加班规则";
  checkRules.value = true;
};
// 图标返回新增补卡规则
const goBackByIcon1 = () => {
  handleAdd1.value = false;
};
// 图标返回考勤时间规则
const goBackByIcon2 = () => {
  set.value = false;
};

// 返回上一级
function back() {
  router.push("group");
}

// 排班制
const PB = (e) => {
  console.log("PB", e);
};

// 打卡方式多选框
function XZ() {
  if (
    form.value.clockInType.includes(1) &&
    form.value.clockInType.length == 1
  ) {
    form.value.wifiList = [];
  } else if (
    form.value.clockInType.includes(2) &&
    form.value.clockInType.length == 1
  ) {
    form.value.addressList = [];
  }
}

// 允许打卡开关
function bkswitch1() {
  console.log("bkswitch1", bkswitch.value);
}

// 弹框取消
function cancelClick() {
  user.value = false;
  person.value = false;
  Time.value = false;
  method.value = false;
  overtime.value = false;
  beside.value = false;
  rest.value = false;
  replace.value = false;
  photo.value = false;
  handleAdd1.value = false;
  handleAdd2.value = false;
  set.value = false;
}

// 弹框确定
function confirmClick() {}
// 补卡次数提交事件
function handleChange() {
  console.log("handleChange", Timevalue1.value);
}
// 补卡时限提交事件
function handleChange1() {
  console.log("handleChange", Timevalue1.value);
}
// 周期天数事件
function weekChange() {
  console.log("weekChange", weeknum.value);
}
</script>
<style lang="less" scoped>
:deep(.el-transfer) {
  text-align: center;
}
:deep(.el-transfer) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jb {
  :deep(.el-radio-group) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
  }
}
.xx {
  position: relative;
  top: -80px;
}
.xztj {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  :deep(.el-radio-group) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
  }
}
.xzrq {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.pb {
  width: 520px;
  height: 80px;
  background-color: #f6f6f6;
  :deep(.el-radio-group) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    margin-left: 20px;
  }
}
.gz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  :deep(.el-checkbox-group) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
.db {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
  font-size: 14px;
}
.zy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  :deep(el-checkbox-group) {
    display: flex !important;
    flex-wrap: wrap;
  }
}
.secondbox {
  width: 100%;
  height: 800px;
  padding-left: 20px;
  padding-top: 20px;
  overflow: auto;
}

:deep(.el-dialog:not(.is-fullscreen)) {
  margin-top: none;
}
:deep(.el-select .el-input) {
  width: 500px;
}
:deep(.el-drawer__header) {
  border-bottom: 1px solid gainsboro;
  height: 80px;
  margin-bottom: -5px;
}
:deep(.el-dialog__header.show-close) {
  margin-top: -10px;
  font-size: 14px;
  border-bottom: 1px solid gainsboro;
}
:deep(.el-dialog__title) {
  font-size: 16px;
}
:deep(.el-radio-group) {
  width: 100%;
}

.attendance-table {
  &-header {
    display: flex;
    background-color: #f6f6f6;
    height: 40px;

    & > div {
      width: 33%;
      color: rgba(23, 26, 29, 0.6);
      line-height: 40px;
      font-size: 14px;
      text-align: center;
    }
  }
  &-list {
    &-row {
      display: flex;
      & > div {
        width: 33%;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}

.wiFi-clock-table {
  &_header {
    background-color: #f6f6f6;
    display: flex;
    align-items: center;
    height: 40px;
    color: rgba(23, 26, 29, 0.6);
    & > div {
      text-align: center;
    }
  }
  &_list {
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    & > div {
      display: flex;
      height: 40px;
      align-items: center;
      text-align: center;
    }
  }
}

.overtime-table,
.card-table,
.shift {
  :deep(.el-table__header .el-table-column--selection .cell .el-checkbox) {
    display: none;
  }
  :deep(.el-table-column--selection .cell) {
    text-align: center;
  }
  :deep(.el-checkbox__input .el-checkbox__inner) {
    border-radius: 50%;
  }
}
</style>
